<template>
  <window ref="win" title="账户充值">
    <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id" onsubmit="return false ">
      <div class="am-u-sm-12 am-scrollable-horizontal">
        <table width="100%" class="am-table am-table-bordered am-table-compact am-table-striped am-text-nowrap">
          <thead class="bg-color">
          <tr>
            <th>学生姓名</th>
            <th>电话</th>
            <th>学生学号</th>
            <th>当前账户余额</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td><span>{{studentDetail.name}}</span></td>
            <td><span>{{studentDetail.phoneNo}}</span></td>
            <td><span>{{studentDetail.studentNo}}</span></td>
            <td><span>{{balanceAmount}}</span></td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="am-u-sm-12 am-scrollable-horizontal">
        <table width="100%" class="am-table am-table-bordered am-table-compact">
          <tbody>
          <tr>
            <td class="bgColor"><span class="red">*&nbsp;&nbsp;</span>请输入充值金额：</td>
            <td><input type="number" required class="am-input-sm" @keyup="formData.amount=formData.amount.replace('-','')" v-model="formData.amount"/></td>
            <td style="border-left: none">元</td>
          </tr>
          <tr>
            <td class="bgColor">充值用途/备注：</td>
            <td><input type="text" class="am-input-sm" maxlength="50" placeholder="50个字以内"  v-model="formData.remark"  /></td>
            <td style="border-left: none"></td>
          </tr>
          <tr>
            <td class="bgColor"><span class="red">*&nbsp;&nbsp;</span>受理校区</td>
            <td>
              <input required type="text" placeholder="校区" class="am-input-sm" v-model="chargeCampusName"  readonly @click="$refs.selectCampus.show()">
            </td>
            <td style="border-left: none"><button type="button" class="am-btn am-btn-default am-btn-sm" @click="$refs.selectCampus.show()">选择</button>
            </td>
          </tr>
          <tr>
            <td class="bgColor">支付方式：</td>
            <td><span class="">POS</span></td>
            <td style="border-left: none"></td>
          </tr>

          </tbody>
        </table>
      </div>


      <div class="am-u-sm-12 am-text-center am-margin-top-lg">
        <button type="button" class="am-btn am-btn-primary" @click="handleSave">保存</button>
        <button type="button" class="am-btn am-btn-primary" @click="handleCancel">取消</button>
      </div>

      <select-campus ref="selectCampus" @ok="selectCampusCallback" ></select-campus>
    </form>
  </window>

</template>

<style scoped>

  .am-table>tbody>tr>td, .am-table>tbody>tr>th{
    text-align: left;
  }
  .bgColor {
    background-color: #eee;
    text-align: center!important;
  }
  .red {
    color: #dd514c;
    vertical-align: middle;
  }
</style>


<script>
  import io from '../../lib/io'
  import conf from '../../lib/conf'
  import util from '../../lib/util'
  import storage from '../../lib/storage'
  import SelectCampus from '../teachingresource/SelectCampus'
  export default{
    data: function () {
      return {
        studentDetail: {},
        formData: {
          studentId: '',
          campusId: '',
          remark: '',
          amount: '',
        },
        studentId:'',
        balanceAmount:'',
        chargeCampusName: '',
        requestPayId: '',
      }
    },
    mounted: function () {
      $(window).smoothScroll()
    },
    components: {SelectCampus},
    methods: {
      upDateData(){
        this.formData.amount = '';
        this.formData.remark = '';
        this.chargeCampusName = '';
      },
      selectCampusCallback:function(campus){
        this.formData.campusId = campus.campusId
        this.chargeCampusName = campus.campusName
      },
      loadStudentDetail: function (studentId) {
        var _this = this
        if (studentId) {
          io.post(io.apiAdminStudentDetail, {studentId: studentId},
            function (ret) {
              if (ret.success) {
                _this.studentDetail = ret.data.student
              } else {
                _this.$alert(ret.desc)
              }
            })
        }
      },
      show:function(){
        this.$refs.win.show(
          {width:1000}
        )
        this.loadStudentDetail(this.studentId)
      },
      handleSave() {
        let _this = this
        if(_this.check()) {
          this.formData.studentId = this.studentId;
          io.post(io.rechargeBalance, this.formData,
            function (ret) {
              if (ret.success) {
                _this.upDateData();
                _this.requestPayId = ret.data;
                _this.handleCancel()
                _this.$nextTick().then(()=>{
                _this.showBarCode();
                })
                _this.queryPayResult()
              } else {
                _this.$alert(ret.desc)
              }
            })
        }
      },
      queryPayResult:function(){
        var _this  = this
        function checkWorker(){

          if(!_this.requestPayId){
            return
          }
          $.ajax({
            url: io.apiAdminQueryPayResult,
            type: 'POST',
            data: {requestPayId : _this.requestPayId , accessToken : io.getHeaders().accessToken  },
            dataType: 'text',
            timeout : 0 ,
            success: function (data) {
              if(data == 'Y'){
                _this.$root.$emit('mainAccount:change')
                _this.$closeDialog()
                _this.$alert('充值成功')
              }else{
                checkWorker()
              }
            },
            error: function (xhr, status, error) {
              checkWorker()
            }
          })
        }
        checkWorker()
      },
      showBarCode:function(){
        this.$dialog('请用pos机扫码','<div style="min-height: 150px;"><img src="'+io.apiBarcodeEncode + '?content=' + this.requestPayId +'" /></div><div style="min-height: 300px;"><img src="'+io.apiQrcodeEncode + '?content=' + this.requestPayId +'" /></div><div>'+this.requestPayId+'</div>',() =>{
          this.$closeDialog()
        })
      },
      handleCancel() {
        this.$refs.win.close()
      },
      check() {
        if(!this.formData.campusId) {
          this.$alert('请选择受理校区')
          return false
        } else if (!this.formData.amount) {
          this.$alert('请输入充值金额')
          return false
        }

        return true
      }
    },
    beforeDestroy:function(){
      delete this.requestPayId
    }
  }


</script>
